<!-- components/notice-popup.vue -->
<template>
	<!-- 遮罩层 -->
	<view v-if="visible" class="popup-mask" :class="{ 'show': visible }" @tap="handleMaskTap">
		<!-- 弹窗内容 -->
		<view class="popup-content" :class="{'important': type === '系统公告'}" :style="popupStyle">
			<!-- 标题栏 -->
			<view class="popup-header" :style="headerStyle">
				<view class="popup-title">
					<uni-icons :type="titleIcon" size="24" color="#fff"></uni-icons>
					{{ title }}
				</view>
				<view class="close-btn" @tap="close">
					<uni-icons type="clear" size="24" color="#fff"></uni-icons>
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="text-body">
				<scroll-view scroll-y class="popup-body">
					<rich-text class="rich-text-preview" :nodes="content"></rich-text>
				</scroll-view>
			</view>
			<!-- 底部按钮 -->
			<view class="popup-footer">
				<button class="popup-btn" @tap="confirm">
					{{ confirmText }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 控制弹窗显示
			visible: {
				type: Boolean,
				default: false
			},
			// 弹窗标题
			title: {
				type: String,
				default: '系统公告'
			},
			// 弹窗内容（支持HTML）
			content: {
				type: String,
				default: ''
			},
			// 确认按钮文字
			confirmText: {
				type: String,
				default: '我知道了'
			},
			// 弹窗类型（normal/important）
			type: {
				type: String,
				default: '系统公告'
			}
		},
		
		computed: {
			// 根据类型设置标题图标
			titleIcon() {
				return this.type === '系统公告' ? 'warn' : 'info';
			},
			// 头部样式
			headerStyle() {
				return {
					background: this.type === '系统公告' ?
						'linear-gradient(to right, #ff416c, #ff4b2b)' : 'linear-gradient(to right, #6a11cb, #2575fc)'
				};
			},
			// 弹窗整体样式
			popupStyle() {
				return {
					transform: this.visible ? 'scale(1)' : 'scale(0.8)',
					opacity: this.visible ? '1' : '0'
				};
			}
		},
		methods: {
			// 关闭弹窗
			close() {
				this.$emit('close');
			},
			// 确认按钮点击
			confirm() {
				this.$emit('confirm');
			},
			// 点击遮罩层
			handleMaskTap(e) {
				if (e.target === e.currentTarget) {
					this.close();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 遮罩层 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		backdrop-filter: blur(5px);

		&.show {
			opacity: 1;
			visibility: visible;
		}
	}

	/* 弹窗内容 */
	.popup-content {
		width: 85%;
		max-width: 500px;
		max-height: 80vh;
		background: #fff;
		border-radius: 20px;
		overflow: hidden;
		transform: scale(0.8);
		opacity: 0;
		transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);

		.popup-mask.show & {
			transform: scale(1);
			opacity: 1;
		}
	}

	/* 弹窗头部 */
	.popup-header {
		padding: 25px 30px;
		position: relative;
		display: flex;
		align-items: center;
	}

	.popup-title {
		color: white;
		font-size: 36rpx;
		font-weight: 600;
		flex: 1;
		display: flex;
		align-items: center;

		.uni-icons {
			margin-right: 12rpx;
		}
	}

	.close-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;

		&:active {
			background: rgba(255, 255, 255, 0.3);
			transform: rotate(90deg);
		}
	}
.text-body{
	margin: 0rpx 30rpx;
}
	/* 弹窗内容区域 */
	.popup-body {
		margin: 0;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		max-height: 50vh;
		overflow-y: auto;
	}

	/* 弹窗底部 */
	.popup-footer {
		padding: 30rpx;
		text-align: center;
		border-top: 1px solid #eee;
	}

	.popup-btn {
		padding: 20rpx 60rpx;
		background: linear-gradient(to right, #6a11cb, #2575fc);
		color: white;
		border: none;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 600;
		transition: all 0.3s;
		box-shadow: 0 10rpx 30rpx rgba(106, 17, 203, 0.3);

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 5rpx 15rpx rgba(106, 17, 203, 0.3);
		}
	}

	/* 重要公告样式 */
	.popup-content.important {

		.popup-btn {
			background: linear-gradient(to right, #ff416c, #ff4b2b);
			box-shadow: 0 10rpx 30rpx rgba(255, 65, 108, 0.3);
		}
	}

	.rich-text-preview {

		/* 确保自动换行 */

		word-break: break-word;
		/* 在单词内换行 */

		word-wrap: break-word;
		/* 允许长单词换行 */



		/* 可选样式 */

		font-size: 32rpx;

		line-height: 1.6;

		color: #333;

		border: 1rpx solid #eee;

		border-radius: 8rpx;

		padding: 20rpx;

		background-color: #fff;

	}
</style>